import React from 'react'
import { connect } from 'dva';
import Classlist from  './Classlist';
import { Link } from 'dva/router';
import Classcard from './Classcard';
import Sugtab from './Sugtab'
import { WhiteSpace, Card, Icon, Grid} from 'antd-mobile';
import styles from './Indexpage1.css'
class Indexpage1 extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
      }
  }
  clickList(e){
    console.log(e);
  }
  componentDidMount() {
    // simulate img loading
    // console.log(' componentDidMount',this.props);
  }
  render() {
    // console.log('indexpage1',this.props);
    let {rolpicdata,themedata,classdata} = this.props;
    const gridData = Array.from(new Array(5)).map((_val, i) => ({
      icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
      text: `name${i}`,
    }));
    console.log(classdata);
    return (
    <div>
        <Sugtab val = {rolpicdata} />
        <Grid data = {gridData} hasLine = {false} columnNum = {5}/>
        <WhiteSpace size='md' />
        <Card full>
        <Card.Header
        title="课程专题"
        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
        extra={<span>更多<Icon type={'right'}/></span>}
        />
        <Card.Body>
        <div className= { styles.topcard}>
          {themedata.map((item, key) => {
            return (
              <div className = {styles.topcardwrap} key = {key}>
              <Classcard
                  title = {item.name}
                  content = {item.description}
                  bgpic = '#10ac84'
              />
              </div>
            )
          })}
        </div>
        <WhiteSpace size='xl' />
        {themedata.map((item, key) => {
          return (
            <div className = {styles.listcontent} key = {key}>
              <Classlist
                title = {item.name}
                content = {item.description}
                bgpic = {item.pic}
                price = {888}
              />
            </div>
          )
        })}
        </Card.Body>
        </Card>

                <WhiteSpace size='md' />
        <Card full>
        <Card.Header
        title="精品课程"
        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
        extra={<span>更多<Icon type={'right'}/></span>}
        />
        <Card.Body>
        <div className= { styles.topcard}>
          {classdata.map((item,key) => {
            return (
              <div className = {styles.topcardwrap} key = {key}>
              <Classcard
                  title = {item.classname}
                  content = {item.breif}
                  bgpic = '#4a69bd'
              />
              </div>
            )
          })}
        </div>
        <WhiteSpace size='xl' />
        {classdata.map((item,key) => {
          return (
            <div className = {styles.listcontent} key = {key} >
              <Link to = {`/classinfo/${item.class_id}`}>
              <Classlist
                title = {item.classname}
                content = {item.breif}
                bgpic = {item.startpic}
                price = {item.price}
              />
              </Link>
            </div>
          )
        })}
        </Card.Body>
        </Card>
      </div>
    );
  }
}

export default connect()(Indexpage1);
